<!--
 * @Author: Lu junwen
 * @Date: 2022-03-13 18:14:37
 * @LastEditors: Lu junwen
 * @LastEditTime: 2022-05-20 02:45:31
 * @FilePath: \vue-shop-app-customer\src\views\Mine\Address.vue
-->
<template>
  <div class="app">
    <div class="header">
      <van-nav-bar
        style="height: 46px; font-size: 12px"
        title="常用地址"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="content">
      <!-- <van-address-list
        v-model="chosenAddressId"
        :list="addressData"
        :switchable="false"
        @add="onAdd"
        @edit="onEdit"
      />-->
      <div class="address" v-for="(item,index) in addressData" :key="index">
        <div class="left">
          <div class="left_top">
            <div class="name">{{item.name}}</div>
            <div class="tel">{{item.tel}}</div>
          </div>
          <div class="left_bottom">{{item.address}}</div>
        </div>
        <div class="right">
          <van-icon name="edit" size="30px" color="#ccc" @click="onEdit(item.id)" />
        </div>
      </div>
    </div>
    <div class="button">
      <van-button
        round
        block
        type="info"
        color="linear-gradient(90deg, #f85959, #ffc773)"
        @click="onAdd"
      >新增地址</van-button>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { mapActions, mapState, mapMutations } from "vuex";
import { get, post } from "@/http/axios";
export default {
  data() {
    return {
      chosenAddressId: '',
      message: [],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onAdd() {
      this.$router.push('addAddress')
    },
    onEdit(id) {
      this.$router.push({
        path: 'addAddress',
        query: { id }
      })
    },
    findDefaultId() {
      this.addressData.forEach(element => {
        if (element.isDefault === true) {
          this.chosenAddressId = element.id
        }
      });
    }
  },
  created() {
    // this.findDefaultId()
  },
  computed: {
    ...mapState("address", ["addressData"]),
  }
};
</script>

<style lang="scss" scoped>
.app {
  background-color: #f7f7f7;
  height: 100vh;
  overflow: scroll;
  .address {
    margin: 10px;
    display: flex;
    justify-content: space-between;
    height: 100px;
    border-radius: 10px;
    background-color: #fff;
    // width: 100%;
    .left {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      width: 75%;
      margin-left: 10px;
      .left_top {
        display: flex;
        align-items: center;
        line-height: 30px;
        text-align: center;
        .name {
          margin-right: 10px;
        }
      }
      .left_bottom{
        margin-bottom: 5px;
      }
    }
    .right {
      margin-top: 35px;
      margin-right: 30px;
    }
  }
  .button {
    position: fixed;
    margin: 16px;
    // padding-right: 56px;
    width: 92%;
    bottom: 50px;
  }
}

::v-deep .van-address-list__bottom {
  bottom: 60px;
}
</style>